/**
 * Created by Administrator on 2017/3/14.
 */
var Button = require('../../../src/libs/button');
var Input = require('../../../src/libs/input');
var Checkbox = require('../../../src/libs/checkbox');
var SelectDropDown = require('../../../src/libs/select-drop-down');
var FormItem = require('../../../src/libs/form-item');
function hasClass(elem, cls) {
    elem = elem || {};
    return new RegExp("\\b" + cls + "\\b").test(elem.className);
};
//添加样式
function addClass(elem, cls) {
    elem = elem || {};
    hasClass(elem, cls) || (elem.className += " " + cls);
    elem.className = elem.className.replace(/^\s|\s$/g, "").replace(/\s+/g, " ");
    return this;
};
//删除样式
function removeClass(elem, cls) {
    elem = elem || {};
    if (hasClass(elem, cls)) {
        elem.className = elem.className.replace(new RegExp("(\\s|^)" + cls + "(\\s|$)"), "");
    }
    return this;
};
var Root = React.createClass({
    getInitialState: function () {

    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.emit("pageLoad","hello world!");
        _this.refs.borrowResult.style.display = "none";
        UEventHub.on('showResult',function (bool,result) {
            if(bool){
                PageDM.user.setValue(result);
                _this.refs.borrow.style.display = "none";
                _this.refs.borrowResult.style.display = "block";
            }else{
                _this.refs.borrow.style.display = "block";
                _this.refs.borrowResult.style.display = "none";
            }

        })

    },
    getType:function (val) {
        var li = this.refs.type.childNodes;
        console.log(li)
        for(var i = 0; i<li.length;i++){
            if(val == i){
                addClass(li[i],"current");
            }else {
                removeClass(li[i],"current");
            }
        }
        PageDM.btn.setValue(val);

    },
    render: function () {
        var _this = this;
        var PageDM = window.PageDM;

        var options = [
            {
                option: "绵阳银行",
                value:"245"
            },
            {
                option: "中国工商银行",
                value: "2"
            },
            {
                option: "交通银行",
                value: "3"
            },
            {
                option: "下拉4",
                value: "4"
            },
            {
                option: "下拉5",
                value: "5"
            }
        ];
        UEventHub.on(PageDM.user.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.phoneWrap.innerHTML = v;
        });
        return (
            <div>
                <div className="header">
                    <div className="top-bar fc-light">
                        <div className="container">
                            <span>服务热线：0816-2373017</span>
                            <span>服务时间：工作日 9:00-18:00</span>
                            <span className="nav-right">
                                <a href="登录注册/登录.html">登录</a>
                                <a href="登录注册/注册.html">注册</a>
                                <a href="帮助中心/平台介绍.html">帮助中心</a>
                                <a href="index.html">返回绵阳商业银行</a>
                            </span>
                        </div>
                    </div>
                    <div className="header-nav">
                        <div className="container">
                            <div className="logo f-left"><a href="index.html"><img src="../images/logo.jpg" alt=""/> </a><a href="index.html"><img src="../images/logoe.jpg" alt=""/></a></div>
                            <div className="nav f-right">
                                <ul className="clearfix">
                                    <li><a href="index.html">首页</a></li>
                                    <li><a href="我要投资.html">我要投资</a></li>
                                    <li><a href="我要借款.html" className="current">我要借款</a></li>
                                    <li><a href="账户中心/我的账户.html">我的账户</a></li>
                                </ul>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="shadow"></div>
                    </div>
                </div>
                <div ref="borrow">
                    <div className="form-loan">
                        <div className="container">
                            <div className="index-title"><b></b>我要借款<b></b></div>
                            <div className="tab">
                                <ul className="clearfix" ref="type">
                                    <li className="col-1 current" onclick={function(){_this.getType(0)}}>企业贷款</li>
                                    <li className="col-2" onclick={function(){_this.getType(1)}}>票据</li>
                                </ul>
                            </div>
                            <div className="form">
                                <FormItem label="企业姓名" dmbind={PageDM.companyName.dmbind}>
                                    <Input placeholder={PageDM.companyName.placeholder} dmbind={PageDM.companyName.dmbind}/>
                                </FormItem>
                                <FormItem label="联系人姓名" dmbind={PageDM.contacts.dmbind}>
                                    <Input placeholder={PageDM.contacts.placeholder} dmbind={PageDM.contacts.dmbind}/>
                                </FormItem>
                                <FormItem label="联系人电话" dmbind={PageDM.contactsPhone.dmbind}>
                                    <Input placeholder={PageDM.contactsPhone.placeholder} dmbind={PageDM.contactsPhone.dmbind}/>
                                </FormItem>
                                <FormItem label="开户银行" dmbind={PageDM.banks.dmbind}>
                                    <SelectDropDown options={options} onChange={PageDM.banks.onChange}/>
                                </FormItem>
                                <FormItem label="银行账号" dmbind={PageDM.bankNum.dmbind}>
                                    <Input placeholder="请输入银行账号" placeholder={PageDM.bankNum.placeholder} dmbind={PageDM.bankNum.dmbind}/>
                                </FormItem>
                                <FormItem label="发布方式">
                                    <input type="text" placeholder="委托银行代为发布" className="ucs-input" disabled/>
                                </FormItem>

                                <div className="form-group check">
                                    <label>&nbsp;</label>
                                    <Checkbox text=" 我已阅读并同意" checked={PageDM.checkbox.checked} onclick={PageDM.checkbox.onClick}/>
                                    <a href="#" className="fc-link">《绵阳市商业银行平台服务协议（个人版）》</a>
                                </div>

                                <div className="button">
                                    <Button value="立即申请" className="btn btn-confirm" onclick={PageDM.btn.onClick}/>
                                </div>
                                <span className="angle angle-left"></span>
                                <span className="angle angle-right"></span>
                            </div>
                        </div>
                    </div>
                    <div className="index-steps loan">
                        <div className="container">
                            <div className="index-title"><b></b>申请流程<b></b></div>
                            <div className="content clearfix">
                                <a href="javascript:;">
                                    <i className="iconfont icon-my"></i>注册/登录
                                </a>
                                <a href="javascript:;" className="arrow"><i className="iconfont icon-arrow"></i> </a>
                                <a href="javascript:;">
                                    <i className="iconfont icon-locatype"></i>选择融资类型
                                </a>
                                <a href="javascript:;" className="arrow"><i className="iconfont icon-arrow"></i> </a>
                                <a href="javascript:;">
                                    <i className="iconfont icon-protocol"></i>签署融资协议
                                </a>
                                <a href="javascript:;" className="arrow"><i className="iconfont icon-arrow"></i> </a>
                                <a href="javascript:;">
                                    <i className="iconfont icon-release"></i>委托银行<br/>代为发布
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div ref="borrowResult" className="loan-result container">
                    <div className="txt">
                        <p>您好，<span ref="phoneWrap"></span>！</p>
                        <p>&nbsp;</p>
                        <p>
                            {PageDM.user.text}
                        </p>
                    </div>
                    <span className="angle angle-top"></span>
                    <span className="angle angle-bottom"></span>
                </div>
                <div className="footer">
                    <div className="container">
                        <div className="footer-logo f-left">
                            <p className="logo-foot"><img src="../images/foot-logo.png" alt=""/></p>
                            <p className="txt">2005－2013 绵阳市商业银行股份有限公司 <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备11013283123号</a>
                            </p>
                        </div>
                        <div className="footer-nav f-right">
                            <div className="col">
                                <h3>关于我们</h3>
                                <ul>
                                    <li><a href="帮助中心/平台介绍.html">平台介绍</a></li>
                                    <li><a href="帮助中心/名词解释.html">名词解释</a></li>
                                    <li><a href="帮助中心/联系我们.html">联系我们</a></li>
                                    <li><a href="帮助中心/服务协议.html">服务协议</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>安全保障</h3>
                                <ul>
                                    <li><a href="帮助中心/安全保障.html">项目安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">资金安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">信息安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">账户安全</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>帮助中心</h3>
                                <ul>
                                    <li><a href="帮助中心/投资操作指引.html">投资指引</a></li>
                                    <li><a href="帮助中心/融资操作指引.html">融资指引</a></li>
                                    <li><a href="帮助中心/平台公告.html">平台公告</a></li>
                                    <li><a href="javascript:;">常见问题</a></li>
                                </ul>
                            </div>
                            <div className="col col-service">
                                <p>客服专线<br/>0816-2373017</p>
                                <p>服务时间<br/>工作日9:00 - 18:00</p>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('main'));